<template>
  <!-- 放置一个图标 -->
  <div class="screenWrapper">
    <svg-icon
      :icon-class="isFull ? 'exit-fullscreen' : 'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data () {
    return {
      // 当前是否是全屏状态
      isFull: false
    }
  },
  methods:{
    toggleScreen() {
      if(this.isFull) {
        // 当前是全屏，点击后，退出全屏状态
        // document.exitFullscreen()
        screenfull.exit()
      } else {
        // 当前不是全屏，点击都，开启全屏状态
        // document.documentElement.requestFullscreen()
        screenfull.request()
      }
      // 切换全屏状态
      this.isFull = !this.isFull
    }
  },
  created() {
    // 监听全屏状态变化的事件
    // document.addEventListener('fullscreenchange', () => {
    //   // console.log('全屏状态发生变化了');
    //   // 拿到当前浏览器的全屏状态，给 isFull 数据赋值
    //   // document.fullscreenElement：当前浏览器的全屏状态
    //   // console.log(!!document.fullscreenElement);
    //   this.isFull = !!document.fullscreenElement
    // })
    // 监听全屏状态变化
    screenfull.on('change', () => {
      // 使 isFull 状态，跟当前浏览器的全屏状态保持一致
      this.isFull = screenfull.isFullscreen
    })
  }
}
</script>

<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
